<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layOut="http://www.w3.org/1999/xhtml"
      layOut:decorator="layOut/echarts">
<head>
    <meta charset="UTF-8">
    <title>曲线图</title>
</head>

<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <div id="proportion" style="background-color:#ffffff;min-height:650px;padding: 10px"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:inline="javascript">
    const xList = [[${xList}]];
    const dataList = [[${dataList}]];
</script>

<script type="text/javascript">
    const myChart = echarts.init(document.getElementById('proportion'), null, {
        renderer: 'canvas',
        useDirtyRect: false
    });

    const option = {
        xAxis: {
            type: 'category',
            data: xList
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: dataList,
                type: 'line',
                smooth: true
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
</script>

</body>
</html>